<template>
  <div>
    <div id="containerLine"></div>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css"
export default {
  name: "lineMap",
  props:['lineData'],
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  created() {
    // this.initMap();
  },
  methods: {
    // 初始化地图
    // initMap() {
    //   var map = new AMap.Map("containerLine", {
    //     zoom: 12, //级别
    //     center: [114.477345, 38.043295], //中心点坐标
    //     //  mapStyle: 'amap://styles/macaron',
    //   });
    //   let that=this
    //   AMap.plugin("AMap.Driving", function () {
    //     var driving = new AMap.Driving({
    //       map:map,
    //       // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    //       policy: AMap.DrivingPolicy.LEAST_TIME,
    //     });

    //     var startLngLat = [that.lineData.fromlon,that.lineData.fromlat];
    //     var endLngLat = [that.lineData.tolon,that.lineData.tolat];

    //     driving.search(startLngLat, endLngLat, function (status, result) {
    //       // 未出错时，result即是对应的路线规划方案
    //     });
    //   });
    // },
    initMap() {
      let that=this

      let map = L.map("containerLine", {
                      minZoom: 3,
                      maxZoom: 15,
                      center: [ that.lineData.fromlat,that.lineData.fromlon],
                      zoom: 15,
                      zoomDelta: 0.5,
                      fullscreenControl: false,
                      zoomControl: false,
                      attributionControl: false
                    });
            this.map = map;
            //http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}//arcgis在线地图
            this.baseLayer=L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{
                    attribution: '&copy; 高德地图',
                    maxZoom: 15,
                    minZoom: 3,
                    subdomains: "1234"
                });
            this.map.addLayer(this.baseLayer);
            this.addMarker()
            this.addPolygon()
    },
    addMarker() {
      let that=this

      //设置图标样式
      var myIcon = L.icon({
        iconUrl: require('../../../assets/start.png'),
        iconSize: [30, 30],
      });
      let marker = L.marker([that.lineData.fromlat,that.lineData.fromlon], {
        icon: myIcon
      }).addTo(this.map)
          // marker.bindPopup(that.position.title);

                //设置图标样式
      var myIcon = L.icon({
        iconUrl: require('../../../assets/end.png'),
        iconSize: [30, 30],
      });
      let marker2 = L.marker([that.lineData.tolat,that.lineData.tolon], {
        icon: myIcon
      }).addTo(this.map)
          // marker2.bindPopup(that.position.title);
    },
    addPolygon(){
      let that=this
      var points= [[that.lineData.fromlat,that.lineData.fromlon],[that.lineData.tolat,that.lineData.tolon]]
      var polygon = L.polygon(points, {color: '#aa0000',fillColor:'#ff15c9',
          weight:2}).addTo(this.map);
},
  },
};
</script>

<style scoped>
#containerLine {
  width: 100%;
  height: 50vh;
}
</style>